<template>
  <div class="left-bottom">
    <ul>
      <li v-for="item in list" :key="item.id" @click="changeLi(item.id)" :class="liId===item.id ? 'li-color' : ''">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "bottom",
  data(){
    return{
      list:[
        {
          id:1,
          name:'一句诗词'
        },
        {
          id:2,
          name:'毒鸡汤'
        },
        {
          id:3,
          name:'励志句子'
        },
      ],
      liId:1
    }
  },
  methods:{
    changeLi(val){
      this.liId = val;
      if (val === 1){
        this.$router.push('/poetry');
      } else if (val === 2){
        this.$router.push('/about');
      } else {
        this.$router.push('./sentence');
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .left-bottom{
    text-align: center;
    ul{
      margin-top: 30px;
      li{
        color: #b8b8b8;
        margin: 10px;
        list-style: none;
      }
      .li-color{
        color: #4caf50;
      }
      li:hover{
        cursor: pointer;
        color: #4caf50;
      }
    }
  }
</style>